jQuery(document).ready(function($) {
    var g_str = ["", "Section 1, Thing 1", "Section 1, Thing 2", "Section 1, Thing 3", "Section 1, Thing 4", "Section 1, Thing 5", "Section 2, Thing 1", "Section 2, Thing 2", "Section 2, Thing 3", "Section 3, Thing 1", "Section 3, Thing 2", "Section 3, Thing3", "Section 3, Thing 4", "Section 4, Thing 1", "Section 4, Thing 2", "Section 4, Thing3", "Section 4, Thing 4"];
                
    var ww = window.innerWidth?window.innerWidth:$(window).width();
    var slidesPerView = 4;
    var slidesHeight = 125;
    if (ww<1000) {
        slidesPerView = 3;
        slidesHeight = 135;
    }

    var mySwiper = new Swiper('.swiper-container',{
        paginationClickable: true,
        slidesPerView: slidesPerView,
        loopAdditionalSlides:3,
        loop: true,
        onSlideChangeEnd : function(swiperHere) {
            changeNav();
            var swiperPage = mySwiper.activeSlide();
            var currentSlider = $(swiperPage).attr("id");
            updateContent(currentSlider);
            updateSection(currentSlider);
        },
    });

    $(".swiper-slide").on('click',function(e){
        console.log('click '+$(this).attr('id'));
        e.preventDefault();
        n = parseInt($(this).attr("id")) - 1;
        mySwiper.swipeTo(n,1000,true );
    });

    $('.arrow-left').on('click', function(e){
        e.preventDefault()
        mySwiper.swipePrev();
    });

    $('.arrow-right').on('click', function(e){
        e.preventDefault();
        mySwiper.swipeNext();
    });

    function resizeItem () {
        var ww = window.innerWidth?window.innerWidth:$(window).width();
        var ratio = ww/1000;
        if (ww < 1000) {
            $('.swiper-container').height(slidesHeight*ratio);
        }else{
            $('.swiper-container').height(slidesHeight);
        }
    }
    resizeItem();
    $(window).resize(function(event) {
        resizeItem();
    });

    function changeNav() {
      
    };

    function clickSection1() {
        $(".section").removeClass("active");
        $("#section1").addClass("active");
        mySwiper.swipeTo(0,1000,true );
    }

    function clickSection2() {
        $(".section").removeClass("active");
        $("#section2").addClass("active");
        mySwiper.swipeTo(5,1000,true );
    }

    function clickSection3() {
        $(".section").removeClass("active");
        $("#section3").addClass("active");
        mySwiper.swipeTo(8,1000,true );
    }

    function clickSection4() {
        $(".section").removeClass("active");
        $("#section4").addClass("active");
        mySwiper.swipeTo(12,1000,true );
    }

    $('html').keydown(function(e){
        if(e.which == 37) {
            e.preventDefault();
            mySwiper.swipePrev();
        }
        if(e.which == 39) {
            e.preventDefault();
            mySwiper.swipeNext();
        }
    });

    

    function updateContent(currentSlider) {
        n = parseInt(currentSlider);
        str = "<h1>" + g_str[n] +  " header</h1>";
        $(".title").html(str);

        str = g_str[n]  + " content.";
        $(".header").html(str);
    }

    function updateSection(currentSlider) {
        n = parseInt(currentSlider);
        if(n > 0 && n < 6) {
            $(".section").removeClass("active");
            $("#section1").addClass("active");
        }
        if(n > 5 && n < 9) {
            $(".section").removeClass("active");
            $("#section2").addClass("active");
        }
        if(n > 8 && n < 13) {		    
            $(".section").removeClass("active");
            $("#section3").addClass("active");
        }
        if(n > 12) {		    
            $(".section").removeClass("active");
            $("#section4").addClass("active");
        }
    /*
    switch(n) {
     case 1:
    	$(".section").removeClass("active");
    	$("#section1").addClass("active");
    	break;
        case 6:
        $(".section").removeClass("active");
    	$("#section2").addClass("active");
    	break;
     case 9:
        $(".section").removeClass("active");
    	$("#section3").addClass("active");
    	break;
     case 13:
        $(".section").removeClass("active");
    	$("#section4").addClass("active");
        break;
    }
    */
    }

    // Click section title event
    $('#section1').on('click', function(event) {
        event.preventDefault();
        clickSection1();
    });
    $('#section2').on('click', function(event) {
        event.preventDefault();
        clickSection2();
    });
    $('#section3').on('click', function(event) {
        event.preventDefault();
        clickSection3();
    });
    $('#section4').on('click', function(event) {
        event.preventDefault();
        clickSection4();
    });

    function rePositionIndicator () {
        var left = $('.swiper-slide').width()/2 + ($('.device').width() - $('.swiper-container').width())/2 - 10;
        $('.indicator').css('left',left+'px');
    }

    rePositionIndicator();
    window.addEventListener("orientationchange", function() {
        // Announce the new orientation number
        window.location.reload();
    }, false);


    window.addEventListener("resize", function() {
        // Announce the new orientation number
        window.location.reload();
        // rePositionIndicator();
    }, false);

    // Change image source if is mobile
    function changeImgSrc () {
        if(ww<768) {
            $('.swiper-slide img').each(function(index, el) {
                var oldSrc = $(el).attr('src');
                var newSrc = 'img/'+oldSrc.split('/')[1].split('.')[0]+'-sm.gif';
                $(el).attr('src',newSrc);
            });
        }
    }
    changeImgSrc();

});